<template>
  <a-modal
    title="新增船舶到达指定港口之后记录"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!--      经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用-->
      <a-form :form="form">
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="mmsi号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['mmsiNumber',{rules: [
                  {required: true, message: '请输入mmsi号，9位数字', trigger: 'blur'},
                  { validator: validateMmsi, trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="港口名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <!--              <a-input v-decorator="['beginPort', {rules: [{required: true, message: '请输入出发港口', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['PortChinese', {rules: [{ required: true, message: '请选择出发港口', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="beginPort in ports" :key="beginPort.portName">{{ beginPort.portName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </a-modal>
</template>

<script>
  import { searchShipTrack } from '@/api/ship/shipTrack'
  export default {
    props: {

    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        ports: [],
        form: this.$form.createForm(this)
      }
    },
    methods: {
      search () {
        this.visible = true
      },
      // 前端验证mmsi号
      validateMmsi (rule, value, callback) {
        const reg = /^[0-9]{9}$/
        if (value === '' || value === undefined || value === null) {
          callback()
        } else {
          if ((!reg.test(value)) && value !== '') {
            callback(new Error('请输入正确的mmsi号'))
          } else {
            callback()
          }
        }
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          // console.log(values)
          if (!errors) {
            searchShipTrack(values).then(res => {
              this.visible = false
              // this.confirmLoading = false
              this.form.resetFields()
              this.$emit('ok', res.result)
            }).catch(err => {
              this.confirmLoading = false
              this.$message.error(err.result || '查找失败')
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
